<template>
	<view class="nav_outer"
		><view class="tabsStyle"
			><u-tabs
				:gutter="125"
				active-color="#5690FB"
				:list="tabList"
				:current="current"
				:bar-style="barStyle"
				:bar-width="200"
				@change="tabChange"
			></u-tabs
		></view>
		<!-- 专家预约 -->
		<view v-if="current == 0">
			<!-- 数据 -->
			<view>
				<view class="Content" v-for="(item, index) in dataList" :key="index">
					<view class="headImg">
						<img :src="item.doctorIcon" alt="" />
					</view>
					<view class="leftContent">
						<view class="topRegistration">
							<view
								class="leftTitle"
								style="font-size: 35rpx; color: #000; font-weight: bolder"
							>
								<!-- <text class="sizeStyle"> 专 </text
								> -->
								{{ item.deptName }}</view
							>
							<view>
								<u-button
									:custom-style="customStyle"
									type="primary"
									@click="registration(item)"
									>立即挂号</u-button
								>
							</view>
						</view>
						<view class="introduce">
							<view
								style="
									font-size: 30rpx;
									color: #000;
									font-weight: bolder;
									margin-right: 12px;
								"
								>{{ item.doctorName }}</view
							>
							<view style="width: 33%">{{ item.position }}</view>
							<view style="width: 33%">{{ item.deptName }}</view>
						</view>
						<view class="beGood">
							<view
								><text style="font-size: 30rpx; color: #000">擅长：</text
								>{{ item.doctorMajor }}</view
							>
						</view>
						<view class="money">
							<view
								><u-icon name="bell-fill" color="#409eff"></u-icon>剩余号源<text
									style="color: #409eff"
									>{{ item.remainderNum }}</text
								></view
							>
							<view
								><u-icon name="rmb-circle-fill" color="#ff7b00"></u-icon
								>挂号费<text style="color: #ff7b00">{{
									item.registrationFee
								}}</text></view
							></view
						>
					</view>
				</view>
			</view>
			<!-- 无数据 -->
			<view v-if="dataList.length < 1">
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<!-- 日期预约 -->
		<view v-if="current == 1">
			<view>
				<view class="dateTop">
					<u-calendar
						ref="calendar"
						v-model="show"
						:max-date="getTime(7)"
						:min-date="getTime(1)"
						@change="changeTime"
					></u-calendar>
					<view @click="show = true" class="date_new">{{
						newDate == '' ? getTime(1) : newDate
					}}</view>
				</view>
				<view class="Content" v-for="(item, index) in appointment" :key="index">
					<view class="headImg">
						<img :src="item.doctorIcon" alt="" />
					</view>
					<view class="leftContent">
						<view class="topRegistration">
							<view
								class="leftTitle"
								style="font-size: 35rpx; color: #000; font-weight: bolder"
								>
								<!-- <text class="sizeStyle"> 专 </text
								> -->
								{{ deptName }}</view
							>
							<u-button type="primary" @click="registration(item)"
								>立即挂号</u-button
							>
						</view>
						<view class="introduce">
							<view
								style="
									font-size: 30rpx;
									color: #000;
									font-weight: bolder;
									margin-right: 12px;
								"
								>{{ item.doctorName }}</view
							>
							<view style="width: 33%">{{ item.position }}</view>
							<view style="width: 33%">{{ deptName }}</view>
						</view>
						<view class="beGood">
							<view
								><text
									style="font-size: 30rpx; color: #000; font-weight: bolder"
									>擅长：</text
								>{{ item.doctorMajor }}</view
							>
						</view>
						<view class="money">
							<view
								><u-icon name="bell-fill" color="#409eff"></u-icon>剩余号源<text
									style="color: #409eff"
									>{{ item.remainderNum }}</text
								></view
							>
							<view
								><u-icon name="rmb-circle-fill" color="#ff7b00"></u-icon
								>挂号费<text style="color: #ff7b00">{{
									item.registrationFee
								}}</text></view
							></view
						>
					</view>
				</view>
			</view>
			<view v-if="appointment.length < 1">
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>

		<!-- 专家日期公共数据 -->
		<!-- <view v-if="outpatient">
			<view class="Content" v-for="(item, index) in dataList" :key="index">
				<view class="headImg">
					<img :src="item.doctorIcon" alt="" />
				</view>
				<view class="leftContent">
					<view class="topRegistration">
						<view
							class="leftTitle"
							style="font-size: 35rpx; color: #000; font-weight: bolder"
							><text class="sizeStyle">  </text
							>{{ item.deptName }}</view
						>
						<u-button type="primary" @click="registration(item)"
							>立即挂号</u-button
						>
					</view>
					<view class="introduce">
						<view style="font-size: 30rpx; color: #000; font-weight: bolder">{{
							item.doctorName
						}}</view>
						<view>{{ item.position }}</view>
						<view>{{ item.deptName }}</view>
					</view>
					<view class="beGood">
						<view
							><text style="font-size: 30rpx; color: #000; font-weight: bolder"
								>擅长：</text
							>{{ item.doctorMajor }}</view
						>
					</view>
					<view class="money">
						<view
							><u-icon name="bell-fill" color="#5690FB"></u-icon>剩余号源<text
								style="color: #5690fb"
								>{{ item.remainderNum }}</text
							></view
						>
						<view
							><u-icon name="rmb-circle-fill" color="#ff7b00"></u-icon
							>挂号费<text style="color: #ff7b00">{{
								item.registrationFee
							}}</text></view
						></view
					>
				</view>
			</view>
		</view> -->
		<view class="safe"></view>
	</view>
</template>

<script>
import getTime from '../../utils/time'
import { selectDoctorInfo, selectClinicDoctorsByDate } from '../../http/api.js'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			customStyle: {
				width: '70px',
			},
			newDate: '',
			show: false,
			// 门诊数据
			dataList: [],
			// 住院数据
			// hospitalizedList: '测试数据',
			// hospitalized: false,
			tabList: [
				{
					name: '专家预约',
				},
				{
					name: '日期预约',
				},
			],
			current: 0,
			barStyle: { backgroundColor: '#5690FB' },
			parentOrgName: {},
			// 科室id
			// deptId: '',
			// 日期预约
			appointment: [],
			deptCode: '',
			deptName: '',
		}
	},
	onLoad(option) {
		let parameter = JSON.parse(option.parameter)
		console.log(parameter, 'dsa11as1asd123')
		this.deptName = parameter.orgName //科室名
		this.deptCode = parameter.orgCode //科室deptCode
		this.parentOrgName = parameter
		let parameterID = {
			id: parameter.id,
			parentUuid: parameter.parentUuid,
			orgCode: this.orgCode,
			deptCode: parameter.orgCode,
		}
		selectDoctorInfo(parameterID).then(({ data, head }) => {
			if (head.code == 200) {
				this.dataList = data
			} else {
				this.dataList = []
			}
		})
	},
	mounted() {},
	computed: {
		...mapState({
			orgCode: state => state.orgCode,
		}),
	},
	methods: {
		getTime,
		// 日期预约
		selectClinicDoctorsByDateList(orgCode, deptCode, clinicDate) {
			selectClinicDoctorsByDate({
				orgCode: orgCode,
				deptCode: deptCode,
				clinicDate: clinicDate, //日期
			}).then(({ data, head }) => {
				if (head.code == 200) {
					this.appointment = data
				}
			})
		},
		// 日期
		changeTime(e) {
			this.newDate = e.result
			console.log(this.newDate)
			this.selectClinicDoctorsByDateList(this.orgCode, this.deptCode, e.result)
		},
		// tab
		tabChange(index) {
			console.log(index)
			this.current = index
			this.newDate = ''
			if (index == 1) {
				// 修改日期默认选中当天时间
				this.$nextTick(() => {
					this.$refs.calendar.activeDate = getTime(1)
				})
				this.selectClinicDoctorsByDateList(
					this.orgCode,
					this.deptCode,
					getTime(1),
				)
			}
		},
		// 专家预约
		registration(item) {
			let parentOrgName = {
				parentOrgName: this.parentOrgName,
				newDate: this.newDate == '' ? getTime(1) : this.newDate,
			}
			console.log(parentOrgName, '测试')
			uni.navigateTo({
				url:
					'./make_?parameter=' +
					JSON.stringify(item) +
					'&parentOrgName=' +
					JSON.stringify(parentOrgName),
			})
		},
		// 日期预约
		// appointmentClick(item) {
		// 	console.log(item)
		// 	let parentOrgName = {
		// 		parentOrgName: this.parentOrgName,
		// 		newDate: this.newDate == '' ? getTime(1) : this.newDate,
		// 	}
		// 	this.$router.navigateTo({
		// 		url:
		// 			'/pages/registration/appointment_yuyue?parameter=' +
		// 			JSON.stringify(item) +
		// 			'&parentOrgName=' +
		// 			JSON.stringify(parentOrgName),
		// 	})
		// },
	},
}
</script>

<style lang="scss">
page {
	background-color: #f3f4f6;
}
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.date_new {
	border-width: 1px;
	border-color: #5690fb;
	border-style: dashed;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #ffffff;
	color: #5690fb;
	font-size: 16px;
	/* display: inline-block; */
	text-align: center;
}
.tabsStyle {
	border-top: 1px solid #d4d4d4;
	.contentTitle {
		font-size: 33rpx;
		font-weight: bold;
		color: #828282;
		padding-left: 10rpx;
	}
}
.Content {
	display: flex;
	padding: 15rpx;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 20rpx;
	.headImg {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
		img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	.leftContent {
		width: 100%;
		height: 200rpx;
		.topRegistration {
			display: flex;
			align-items: center;
			.leftTitle {
				flex: 1;
				.sizeStyle {
					display: inline-block;
					width: 44rpx;
					text-align: center;
					background-color: #0089ff;
					color: aliceblue;
					margin-right: 4rpx;
				}
			}
		}
		.introduce {
			display: flex;
			view {
				// width: 33%;
				// flex: 1;
			}
		}
		.beGood {
			color: #cccccc;
		}
		.money {
			display: flex;
			view {
				flex: 1;
			}
		}
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>